<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <TopdayOne></TopdayOne>
    </el-col>
    <el-col :span="6">
      <TopdayTwo></TopdayTwo>
    </el-col>
    <el-col :span="6">
      <TopdayThree></TopdayThree>
    </el-col>
    <el-col :span="6">
      <TopdayFour></TopdayFour>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
// 导入封装的第一个组件
import TopdayOne from './components/TopdayOne/index.vue'
import TopdayTwo from './components/TopdayTwo/index.vue'
import TopdayThree from './components/TopdayThree/index.vue'
import TopdayFour from './components/TopdayFour/index.vue'
</script>

<style lang="scss" scoped>
//  css属性的深度
::v-deep(.down) {
  margin-top: 3px;
  border: 5px solid blue;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
::v-deep(.up) {
  margin-bottom: 5px;
  border: 5px solid red;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
}
</style>
